<template>
	<view class="page-root">
		<h3>相册</h3>
		<button type="primary" @click="add">点击添加一个宫格</button>
		<button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;"
			@click="del">点击删除一个宫格</button>
		<button type="primary" style="margin-top: 15px;" @click="Reverse">倒序</button>
		<uni-section title="动态加载" type="line" padding>
			<view class="grid-dynamic-box">
				<uni-grid :column="3" :highlight="true" @change="change">
					<uni-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index">
						<view class="grid-item-box" :style="{'backgroundColor':item.color}">
							<image :src="item.url" class="image" mode="aspectFill" />
							<text class="text">{{ item.text }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			
		</uni-section>
		
		
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
	</view>
</template>

<script setup lang="ts">

//前页面传菜谱id，后端查询对应id
import { Prop, ref } from 'vue';


let dynamicList:any = ref([]);
let imageValue:any = ref([]);


// 获取上传状态
function select(e){
	console.log('选择文件：',e)
}
		// 获取上传进度
function progress(e){
	console.log('上传进度：',e)
}
		
		// 上传成功
function success(e){
	console.log('上传成功')
}
		
		// 上传失败
function fail(e){
	console.log('上传失败：',e)
}
	
// function open(){
	
// 	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
// 	this.$ref.popup.open()
// }
const popupRef = ref(null);

const open = () => {
  // 通过组件定义的ref调用uni-popup方法
  if (popupRef.value) {
    popupRef.value.open('center');
  }
};

function popupContrual(){
	console.log('正在被长按');
}
</script>

<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>

